<template>
  <view>
    <my-message-top :text="'风格选择'"></my-message-top>
    
    <view class="switch-code">
      <text class="switch-code-t1">请领取您的转换码</text>
      <view class="switch-code-box">
        <text class="switch-code-t2">转换码：{{ task_id }}</text>
        <text class="switch-code-t3">您可通过转换码查询任务进程</text>
      </view>
      <view class="switch-code-btn" @click="getPic()">
        <text class="switch-code-t4">查询</text>
      </view>
    </view>
    
    <view class="switch-pic" v-show="pic">
      <text class="switch-code-t5">转化成功!</text>
      <image :src="pic" mode=""></image>
    </view>
  </view>
</template>

<script>
  import {getPic} from '../../api/cat-camera.js'
  export default {
    data() {
      return {
        task_id: '',
        pic: ''
      };
    },
    onLoad(option){
      this.task_id = option.task_id
      console.log(this.task_id);
    },
    methods:{
      async getPic(){
        const {data:data} = await getPic(this.task_id)
        console.log(data);
        this.pic = data.data
        if(data.code === 202 ) return uni.$showMsg(data.msg)
      }
    }
  }
</script>

<style lang="scss">
.switch-code{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin: 35rpx 35rpx;
  .switch-code-t1{
    font-size: 15px;
    font-weight: bold;
    color: #8B8B8B;
    margin-bottom: 35rpx;
    margin-left: -428rpx;
  }
  .switch-code-box{
    background-image: url('~@/static/cat-camera/rectangle145.png');
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 700rpx;
    height: 192rpx;
    margin-bottom: 55rpx;
    .switch-code-t2{
      font-size: 20px;
      font-weight: bold;
      color: #666666;
      padding-left: 88rpx;
      margin-top: 25rpx;
    }
    .switch-code-t3{
      font-size: 15px;
      color: #868686;
      padding-bottom: 20rpx;
    }
  }
  .switch-code-btn{
    width: 356rpx;
    height: 100rpx;
    background-image: url('~@/static/cat-camera/rectangle57.png');
    background-repeat: no-repeat;
    text-align: center;
    .switch-code-t4{
      font-size: 18px;
      font-weight: bold;
      color: #666666;
      line-height: 100rpx;
    }
  }
}

.switch-pic{
  width: 676rpx;
  height: 710rpx;
  background-color: #FFF4CE;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin: 80rpx 35rpx;
  .switch-code-t5{
    font-size: 20px;
    font-weight: bold;
    color: #666666;
    margin-left: -410rpx;
  }
  image{
    width: 610rpx;
    height: 498rpx;
  }
}
</style>
